<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style_blindbox.css">
    <link href="/css/boxicons.min.css" rel="stylesheet">
    <script src="js/anime.min.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .header {
                width: 100%;
                height: 55px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 605px;
                background-color: #e6e5e5;
                padding-top: 50px;
            }

            .foot {
                width: 100%;
            }

        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px) {
            .header {
                width: 100%;
                height: 110px;
            }

            .nav .search input {
                width: 650px;
                height: 40px;
            }

            .nav .search button {
                width: 60px;
                height: 40px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 1110px;
                background-color: #e6e5e5;
                padding-top: 80px;
            }

            ._list {
                height: 840px;
            }

            .foot {
                width: 100%;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .header {
                width: 100%;
                height: 150px;
            }

            .nav .search input {
                width: 1200px;
                height: 70px;
            }

            .nav .search button {
                width: 1200px;
                height: 40px;
            }

            .content {
                width: 100%;
                height: 130px;
                background-color: #e6e5e5;
            }

            .list {
                width: 100%;
                height: 1016px;
                background-color: #e6e5e5;
                padding-top: 80px;
            }

            ._list {
                height: 840px;
            }

            .foot {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div>
        <div id="theme">
            <!-- 头部 -->
            <header class="header">
                <div class="w nav">
                    <div class="logo">
                        <img src="./images/logo.png" />
                    </div>
                    <div class="search">
                        <input type="text" name="" id="" placeholder="请输入数字藏品、盲盒名称"><button>搜索</button>
                    </div>
                </div>
            </header>

            <!-- 预览 -->
            <div class="list">
                <a href="#">
                    <div class="_list">
                        <div class="list_img">
                            <img src="./images/blindbox.jpg" />
                        </div>
                    </div>
                </a>
            </div>
            <!-- 底部导航栏 -->
            <div class="foot">
                <div class="navbar">
                    <!-- <div class="effect"></div> -->
                    <a href="#">
                        <button class="active">
                            <i class="iconfont icon-shouye"></i>
                            <p>首页</p>
                        </button>
                    </a>
                    <a href="./blindbox.html">
                        <button>
                            <i class="iconfont icon-manghe"></i>
                            <p>盲盒</p>
                        </button>
                    </a>
                    <a href="./home.html">
                        <button>
                            <i class="iconfont icon-wode"></i>
                            <p>我的</p>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // const effect = document.querySelector('.effect');
        // const buttons = document.querySelectorAll('.navbar button:not(.plus)');
        // buttons.forEach(button => {
        //     button.addEventListener('click', e => {
        //         const x = e.target.offsetLeft;
        //         buttons.forEach(btn => {
        //             btn.classList.remove('active');
        //         })
        //         e.target.classList.add('active');
        //         anime({
        //             targets: '.effect',
        //             left: `${x}px`,
        //             opacity: '1',
        //             duration: 600
        //         })

        //     })

        //})
    </script>
</body>

</html>